<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项管理系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/layui/2.9.14/css/layui.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <script>
        async function checkUserLoggedIn() {
          const token = localStorage.getItem('token');
    
          if (!token) {
            window.location.href = 'login.html'; // 如果没有登录，跳转到登录页
            return;
          }
    
          try {
            const response = await fetch('http://localhost:3000/api/current-user', {
              method: 'GET',
              headers: {
                'Authorization': `Bearer ${token}`
              }
            });
            // console.log(response);
            if (response.ok) {
              const data = await response.json();
            //   console.log(data);
            } else {
              // Token 无效或过期
              localStorage.removeItem('token');
              window.location.href = 'login.html'; // 跳转到登录页
            }
          } catch (error) {
            console.error('获取用户信息失败:', error);
            window.location.href = 'login.html'; // 跳转到登录页
          }
        }
        
        // 页面加载时检查是否已登录
        window.onload = checkUserLoggedIn;
      </script>
</head>
<body>
    <div class="layui-container">
        <h1 class="layui-header">待办事项管理系统</h1>
        
        <div class="layui-row layui-col-space20">
            <div class="layui-col-md8">
                <div class="layui-card">
                    <div class="layui-card-header">添加新待办事项</div>
                    <div class="layui-card-body">
                        <form class="layui-form" id="todoForm">
                            <div class="layui-form-item">
                                <input type="text" name="todoItem" required lay-verify="required" placeholder="请输入待办事项" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-item">
                                <select name="priority" lay-verify="required">
                                    <option value="">请选择优先级</option>
                                    <option value="高">高</option>
                                    <option value="中">中</option>
                                    <option value="低">低</option>
                                </select>
                            </div>
                            <div class="layui-form-item">
                                <input type="text" name="dueDate" id="dueDate" placeholder="请选择截止日期" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-item">
                                <button class="layui-btn layui-btn-normal layui-btn-fluid" lay-submit lay-filter="addTodo">添加</button>
                            </div>
                        </form>
                    </div>
                </div>
                
                <div class="layui-card">
                    <div class="layui-card-header">待办事项列表</div>
                    <div class="layui-card-body">
                        <div class="layui-form-item">
                            <input type="text" id="searchInput" placeholder="搜索待办事项" autocomplete="off" class="layui-input">
                        </div>
                        <table class="layui-table" id="todoTable">
                            <thead>
                                <tr>
                                    <th>待办事项</th>
                                    <th>优先级</th>
                                    <th>截止日期</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="todoList"></tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header">任务完成统计</div>
                    <div class="layui-card-body">
                        <div id="todoChart" style="width: 100%; height: 300px;"></div>
                    </div>
                </div>
                
                <div class="layui-card">
                    <div class="layui-card-header">每日任务趋势</div>
                    <div class="layui-card-body">
                        <div id="trendChart" style="width: 100%; height: 300px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.9.14/layui.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/app.js"></script>
</body>
</html>
